<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    /* CSS样式 */
.errorbook-section {
  max-width: 1200px;
  margin: 2rem auto;
  padding: 0 1rem;
}

.errorbook-header {
  background: linear-gradient(135deg, #2c3e50, #34495e);
  color: white;
  padding: 2rem;
  border-radius: 12px;
  margin-bottom: 1.5rem;
}

.stats-summary {
  display: flex;
  gap: 2rem;
  margin-top: 1.5rem;
}

.stat-item {
  text-align: center;
  .count {
    font-size: 2.5rem;
    font-weight: bold;
    display: block;
  }
  .label {
    font-size: 0.9rem;
    opacity: 0.8;
  }
}

.errorbook-toolbar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}

.filter-btn {
  padding: 0.6rem 1.2rem;
  border: 2px solid #ddd;
  border-radius: 20px;
  background: none;
  cursor: pointer;
  transition: all 0.3s;
  &.active {
    background: #2196F3;
    color: white;
    border-color: #2196F3;
  }
}

.error-item {
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  margin-bottom: 1rem;
  overflow: hidden;
  
  &[data-type="word"] { border-left: 4px solid #2196F3; }
  &[data-type="excel"] { border-left: 4px solid #4CAF50; }
  &[data-type="ppt"] { border-left: 4px solid #E91E63; }
}

.item-header {
  padding: 1rem;
  background: #f8f9fa;
  display: flex;
  justify-content: space-between;
  .q-type {
    font-weight: bold;
    &::before {
      content: '📌';
      margin-right: 0.5rem;
    }
  }
}

.question-preview {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.toggle-detail {
  background: none;
  border: none;
  color: #2196F3;
  cursor: pointer;
  &:hover {
    text-decoration: underline;
  }
}

.item-footer {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #eee;
}

.mastery-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
  .stars {
    display: flex;
    gap: 0.3rem;
    .star {
      width: 20px;
      height: 20px;
      background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23ddd" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
      &.active {
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="%23FFC107" d="M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z"/></svg>');
      }
    }
  }
}

.actions {
  display: flex;
  gap: 0.5rem;
  .action-btn {
    padding: 0.5rem 1rem;
    border-radius: 20px;
    border: none;
    cursor: pointer;
    &.practice {
      background: #2196F3;
      color: white;
    }
    &.delete {
      background: #ff4444;
      color: white;
    }
  }
}

.item-detail {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  .detail-content {
    padding: 1rem;
    border-top: 1px solid #eee;
  }
}

.error-item.active .item-detail {
  max-height: 500px;
}
/* 搜索框 */
.search-box {
    max-width: 500px;
    margin: 0.2rem auto;
    position: relative;
}

.search-box input {
    width: 100%;
    padding: 14px 18px;
    font-size: 14px;
    border: 2px solid #e0e0e0;
    border-radius: 30px;
    outline: none;
    transition: all 0.3s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    background: #ffffff;
}

/* 交互状态 */
.search-box input:focus {
    border-color: #4a90e2;
    box-shadow: 0 4px 12px rgba(74, 144, 226, 0.2);
    padding-left: 48px;
}

.search-box input::placeholder {
    color: #a0a0a0;
    transition: opacity 0.3s ease;
}

.search-box input:focus::placeholder {
    opacity: 0.5;
}

/* 添加搜索图标 */
.search-box::before {
    content: "🔍";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-50%);
    opacity: 0.5;
    transition: opacity 0.3s ease;
    z-index: 1;
}

.search-box:focus-within::before {
    opacity: 0.8;
    left: 22px;
}
  </style>
</head>
<body>
  <!-- HTML结构 -->
<section class="errorbook-section">
  <div class="errorbook-header">
    <h1>我的错题本</h1>
    <div class="stats-summary">
      <div class="stat-item">
        <span class="count">28</span>
        <span class="label">累计错题</span>
      </div>
      <div class="stat-item">
        <span class="count">73%</span>
        <span class="label">掌握进度</span>
      </div>
    </div>
  </div>

  <div class="errorbook-toolbar">
    <div class="filter-group">
      <button class="filter-btn active" data-filter="all">全部</button>
      <button class="filter-btn" data-filter="word">字处理</button>
      <button class="filter-btn" data-filter="excel">电子表格</button>
      <button class="filter-btn" data-filter="ppt">演示文稿</button>
    </div>
    <div class="search-box">
      <input type="text" placeholder="搜索错题内容...">
    </div>
  </div>

  <div class="errorbook-list">
    <!-- 错题条目模板 -->
    <div class="error-item" data-type="word" data-difficulty="3">
      <div class="item-header">
        <span class="q-type">字处理题</span>
        <span class="error-count">第3次出错</span>
      </div>
      <div class="item-body">
        <div class="question-preview">
          <h3>设置文档标题样式为"标题1"并居中显示</h3>
          <button class="toggle-detail">查看详情</button>
        </div>
        <div class="item-footer">
          <div class="mastery-progress">
            <div class="stars">
              <span class="star active"></span>
              <span class="star active"></span>
              <span class="star"></span>
            </div>
            <span class="status">待巩固</span>
          </div>
          <div class="actions">
            <button class="action-btn practice">重做本题</button>
            <button class="action-btn delete">移出错题</button>
          </div>
        </div>
      </div>
      <div class="item-detail">
        <div class="detail-content">
          <h4>错误分析</h4>
          <p>未正确使用样式库功能，操作路径错误...</p>
          <div class="correct-steps">
            <h5>正确操作步骤：</h5>
            <ol>
              <li>选中标题文字</li>
              <li>切换到【开始】选项卡</li>
              <li>在样式库中选择"标题1"</li>
            </ol>
          </div>
        </div>
      </div>
    </div>
    <!-- 更多错题条目 -->
  </div>
</section>
<script>
  // JavaScript交互
class ErrorBook {
  constructor() {
    this.errors = JSON.parse(localStorage.getItem('errorbook')) || [];
    this.init();
  }

  init() {
    this.renderList();
    this.addEventListeners();
  }

  renderList() {
    const container = document.querySelector('.errorbook-list');
    container.innerHTML = this.errors.map((error, index) => `
      <div class="error-item" data-type="${error.type}" data-difficulty="${error.difficulty}">
        <div class="item-header">
          <span class="q-type">${this.getTypeName(error.type)}</span>
          <span class="error-count">第${error.count}次出错</span>
        </div>
        <div class="item-body">
          <div class="question-preview">
            <h3>${error.question}</h3>
            <button class="toggle-detail">${error.expanded ? '收起' : '展开'}详情</button>
          </div>
          <div class="item-footer">
            <div class="mastery-progress">
              <div class="stars">
                ${Array(3).fill().map((_,i) => `
                  <span class="star ${i < error.mastery ? 'active' : ''}"></span>
                `).join('')}
              </div>
              <span class="status">${this.getStatusText(error.mastery)}</span>
            </div>
            <div class="actions">
              <button class="action-btn practice" data-id="${index}">重做本题</button>
              <button class="action-btn delete" data-id="${index}">移出错题</button>
            </div>
          </div>
        </div>
        <div class="item-detail" style="max-height:${error.expanded ? '500px' : '0'}">
          <div class="detail-content">
            <h4>错误分析</h4>
            <p>${error.analysis}</p>
            <div class="correct-steps">
              <h5>正确操作步骤：</h5>
              <ol>${error.steps.map(step => `<li>${step}</li>`).join('')}</ol>
            </div>
          </div>
        </div>
      </div>
    `).join('');
  }

  addEventListeners() {
    // 展开/折叠详情
    document.querySelectorAll('.toggle-detail').forEach(btn => {
      btn.addEventListener('click', () => {
        const item = btn.closest('.error-item');
        const isActive = item.classList.toggle('active');
        btn.textContent = isActive ? '收起详情' : '展开详情';
      });
    });

    // 删除错题
    document.querySelectorAll('.delete').forEach(btn => {
      btn.addEventListener('click', () => {
        const index = btn.dataset.id;
        this.errors.splice(index, 1);
        this.save();
        this.renderList();
      });
    });

    // 重做题目
    document.querySelectorAll('.practice').forEach(btn => {
      btn.addEventListener('click', () => {
        const index = btn.dataset.id;
        this.redoQuestion(this.errors[index]);
      });
    });

    // 筛选功能
    document.querySelectorAll('.filter-btn').forEach(btn => {
      btn.addEventListener('click', () => {
        document.querySelectorAll('.filter-btn').forEach(b => 
          b.classList.remove('active'));
        btn.classList.add('active');
        this.filterQuestions(btn.dataset.filter);
      });
    });
  }

  filterQuestions(type) {
    document.querySelectorAll('.error-item').forEach(item => {
      item.style.display = type === 'all' || item.dataset.type === type 
        ? 'block' : 'none';
    });
  }

  getTypeName(type) {
    const types = {
      word: '字处理题',
      excel: '电子表格',
      ppt: '演示文稿'
    };
    return types[type] || '未知题型';
  }

  getStatusText(mastery) {
    return ['未掌握', '待巩固', '已掌握'][mastery] || '未知状态';
  }

  redoQuestion(error) {
    // 跳转到对应题目练习
    console.log('重新练习题目:', error);
  }

  save() {
    localStorage.setItem('errorbook', JSON.stringify(this.errors));
  }
}

// 初始化
document.addEventListener('DOMContentLoaded', () => {
  new ErrorBook();
});
// 导出错题功能
function exportErrors() {
  const data = JSON.stringify(this.errors);
  const blob = new Blob([data], {type: 'application/json'});
  const url = URL.createObjectURL(blob);
  const a = document.createElement('a');
  a.href = url;
  a.download = `错题备份_${new Date().toLocaleDateString()}.json`;
  a.click();
}

// 导入错题功能
function importErrors(file) {
  const reader = new FileReader();
  reader.onload = () => {
    this.errors = JSON.parse(reader.result);
    this.save();
    this.renderList();
  };
  reader.readAsText(file);
}
// 搜索框
document.addEventListener('DOMContentLoaded', () => {
    const searchInput = document.querySelector('.search-box input');
    
    // 输入防抖处理
    let timeout;
    searchInput.addEventListener('input', (e) => {
        clearTimeout(timeout);
        timeout = setTimeout(() => {
            performSearch(e.target.value);
        }, 300);
    });

    // 回车键搜索
    searchInput.addEventListener('keydown', (e) => {
        if (e.key === 'Enter') {
            performSearch(e.target.value);
        }
    });

    function performSearch(query) {
        // 在此处实现搜索逻辑，例如：
        console.log('执行搜索:', query);
        // 示例：过滤本地内容
        // document.querySelectorAll('.question-item').forEach(item => {
        //     item.style.display = item.textContent.includes(query) ? '' : 'none'
        // });
    }
});
</script>
  
</body>
</html>